<template>
  <div class="stores-box">
    <header>
      <el-button type="primary">查询</el-button>
      <el-button @click="addEdit()">新增</el-button>
    </header>
    <main>
      <el-table :data="state.shopDataRow" 
         style="width: 100%"
         max-height="250">
           <el-table-column fixed prop="shop_name" label="商铺名字" width="150" />
           <el-table-column prop="state" label="商品状态" width="240">
             <template #default="scope">
                <span class="suspend" v-if="scope.row.state === 'Y'">暂停营业</span>
                <span class="edit" v-else>正常营业</span>
             </template>
           </el-table-column>
           <el-table-column prop="area" label="经营区域" width="240" />
           <el-table-column prop="manager" label="店长" width="120" />
           <el-table-column prop="remark" label="备注" width="360" />
           <el-table-column fixed="right" label="按钮" width="180">
             <template #default="scope">
              <span class="edit" @click="addClickEdtail(scope.row)">详情</span>
              <span class="edit" @click="addClickEdit(scope.row)">编辑</span>
               <span class="edit" v-if="scope.row.state === 'Y'"  text @click="btnEvt(scope.row)">正常营业</span>
               <span class="edit" v-else text  @click="btnEvt(scope.row)">暂停营业</span>
             </template>
           </el-table-column>
      </el-table>
    </main>
  </div>
</template>

<script setup>
   import {reactive} from 'vue'
   import { shopList } from '@/apis/shop'
   import router from '@/router';
   import store from '@/store';
   import { ElMessage, ElMessageBox } from 'element-plus'
  
   //定义门店列表数据
   const state = reactive({
    shopDataRow:[]
   })
   //获取门店列表数据
   const shopData = async () => {
     const result = await shopList()
    //  console.log(result)
     state.shopDataRow = result.data.rows
     store.commit('detailrow',state.shopDataRow)
     console.log(state.shopDataRow)
   }
   shopData()
 
   //跳转到详情页
   //定义传递到详情页数据
    const data = reactive({
      detailList:[]
    })
    //点击跳转到详情
   function addClickEdtail(row){
    console.log(1111)
      data.detailList = row
      console.log(data.detailList)
      store.commit('setdetailList',data.detailList)
      console.log(store.getters.detailList)
      router.push('/shop/detail')
   }
   //跳转到编辑页面
   function addClickEdit(row) {
    data.detailList = row
    store.commit('setdetailList',data.detailList)
    console.log(store.getters.detailList)
     router.push('/shop/edit')
   }

   function addEdit(){
    router.push('/shop/edit')
   }

  // 提示框逻辑
    function btnEvt(row) {
      console.log(row)
      ElMessageBox.confirm(
          '确定要重新开启这个门店?',
          '操作门店提醒',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            if(row.state === 'N'){
              row.state = 'Y'
            }else{
              row.state = 'N'
            }
            ElMessage({
              type: 'success',
              message: '操作成功',
           })
          })
          .catch(() => {
             
          })
    }
</script>

<style lang="less" scoped>
   header{
    display: block;
    width: 100%;
    height: 80px;
    text-align: right;
    line-height: 80px;
    border-bottom:1px solid #ddd ;
    button{
      margin: 12px;
    }
   }
   main{
    height: 100%;
    background-color: #fff;
    padding: 8px 12px;
     .el-table {
      padding-top:5px ;
     }
   }
   .cell button{
    margin-right: 10px;
   }
   .cell span{
    margin-right: 10px;
   }
   .edit{
    color: #1890ff;
    cursor: pointer;
   }
   .suspend{
    color:#ddd;
   }

   
</style>
